
<template>
  <div class="analyzeData">
    <income :list="list.annualIncome" class="income-box"/>
    <dti :list="list.dti" class="ageLimit-box"/>
    <ageLimit :list="list.employmentLength" class="ageLimit-box"/>
    <homeOwnership :list="list.homeOwnership" class="homeOwnership-box"/>
    <installment :list="list.installment" class="total-interest-rate"/>
    <interestRate :list="list.interestRate" class="total-interest-rate"/>
    <loanAmnt :list="list.loanAmnt" class="total-loan-amnt"/>
    <revolUtil :list="list.revolUtil" class="ageLimit-box"/>
  </div>
</template>
<script >
import income from '@/components/analyze/annualIncome.vue'
import dti from '@/components/analyze/dti.vue'
import ageLimit from '@/components/analyze/employmentLength.vue'
import homeOwnership from '@/components/analyze/homeOwnership.vue'
import installment from '@/components/analyze/installment.vue'
import interestRate from '@/components/analyze/interestRate.vue'
import loanAmnt from '@/components/analyze/loanAmnt.vue'
import revolUtil from '@/components/analyze/revolUtil.vue'

export default{
  components: {
    ageLimit,
    income,
    dti,
    homeOwnership,
    revolUtil,
    interestRate,
    loanAmnt,
    installment
  },
  props: {
    'list': {
      type: Object,
      default: null
    }
  }
}
</script>

<style lang="scss">
.analyzeData{
  .el-card{
    margin-bottom: 20px;
  }
}
</style>
